<template>
<div class="proInfo">
    <div class="head-info">
        <div class="clearfix">
            <div class="fl">
                <div class="info">
                    <div class="item">
                        <span class="k">产品ID：</span>
                        <span class="v">{{data.customization ? data.customization.id : ''}}</span>
                    </div>
                    <div class="item">
                        <span class="k">线路类型：</span>
                        <span class="v">私人订制</span>
                    </div>
                    <!--<div class="item">
                        <span class="k">线路分类：</span>
                        <span class="v" v-if="data.categoryList && data.categoryList.length>0">
                            <span class="v" v-for="(item,index) in data.categoryList" :key="item.id">
                                <span class="v">{{item.categoryName}}</span>
                                <el-divider direction="vertical" v-if="index<data.categoryList.length-1"></el-divider>
                            </span>
                        </span>
                    </div>
                    <div class="item">
                        <span class="k">线路标签：</span>
                        <span class="v" v-if="data.tagList && data.tagList.length>0">
                            <span class="v" v-for="(item,index) in data.tagList" :key="item.id">
                                <span class="v">{{item.tagName}}</span>
                                <el-divider direction="vertical" v-if="index<data.tagList.length-1"></el-divider>
                            </span>
                        </span>
                    </div>-->
                </div>
            </div>
            <div class="fr">
                <div class="item" @click="showMenu=!showMenu">
                    <span class="k">信息：</span>
                    <span class="v mr6" v-if="unknownInfos && unknownInfos.length>0">未完善</span>
                    <span class="mr6" v-else>已完善</span>
                    <i class="el-icon-warning-outline"></i>
                </div>
                <div class="drop-menu" v-if="showMenu && unknownInfos && unknownInfos.length>0">
                    <ul>
                        <li class="title">以下信息未完善</li>
                        <li v-for="item in unknownInfos" :key="item.name" class="k">
                            <div>{{item.name}}</div>
                            <div v-if="item.children">
                                <ul v-for="subItem in item.children" :key="subItem.name">
                                    <li>{{subItem.name}}</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <el-menu :default-active="active" mode="horizontal" @select="setNav" text-color="#333">
            <el-menu-item index="1">产品信息</el-menu-item>
            <el-menu-item index="2">产品描述</el-menu-item>
            <el-menu-item index="3">人群说明</el-menu-item>
            <el-menu-item index="4">预定规则</el-menu-item>
            <el-menu-item index="5">价格</el-menu-item>
        </el-menu>
    </div>
    <div class="proInfo" v-if="region">
        <PageInfo ref="info" :prodId="id" :region="region" @changeSubMenu="refreshInfo" :data="data" v-if="active == '1'" />
        <PageDesc ref="desc" :prodId="id" :region="region" @changeSubMenu="refreshInfo" :data="data" v-if="active == '2'" />
        <PageGroup ref="group" :prodId="id" :region="region" @changeSubMenu="refreshInfo" :data="data" v-if="active == '3'" />
        <PageRule ref="rule" :prodId="id" :region="region" @changeSubMenu="refreshInfo" :data="data" v-if="active == '4'" />
        <PagePrice ref="price" :prodId="id" :region="region" @changeSubMenu="refreshInfo" :data="data" v-if="active == '5'" />
        <div style="padding: 20px;">
            <el-button @click="submit" type="primary" :disabled="isDisabled">保存当前模块</el-button>
        </div>
    </div>
</div>
</template>

<script>
import PageInfo from './info'
import PageDesc from './desc'
import PageGroup from './group'
import PageRule from './rule'
import PagePrice from './price'

export default {
  name: 'customizationInfo',
  components: {
    PageInfo,
    PageDesc,
    PageGroup,
    PageRule,
    PagePrice
  },
  created () {
    this.id = this.$route.params.id
    this.getInfo()
    this.getDict()
    this.getUncompleteInfo()
  },
  watch: {
    $route () {
      if (this.$route.params.id !== undefined) {
        this.active = '1'
        this.id = this.$route.params.id
        this.getInfo()
        this.getDict()
        this.getUncompleteInfo()
      }
    },
    active: function (newVal, oldVal) {
      this.getInfo()
    }

  },
  data () {
    return {
      showMenu: false,
      active: '1',
      id: '',
      data: {
        customization: {}
      },
      region: '',
      unknownInfos: [],
      isDisabled: false
    }
  },
  methods: {
    refreshInfo (idx) {
      this.active = idx
      // 重新获取信息完善程度
      this.getUncompleteInfo()
    },

    getUncompleteInfo () {
      const url = `/customization/noFinish/${this.id}`
      this.$http.get(url).then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        this.unknownInfos = res.data.data
      })
    },
    getDict () {
      Promise.all([this.$http.get('/sys/region/region')]).then(values => {
        this.region = values[0].data.data
      })
    },
    setNav (idx) {
      this.active = idx
    },
    getInfo () {
      this.$http.get('/customization/' + this.id).then(res => {
        this.data = res.data.data
        if (res.data.data.customization.status === 'user_cancel' || res.data.data.customization.status === 'agency_cancel') {
          this.isDisabled = true
          return
        }
        this.isDisabled = false
      })
    },
    submit () {
      if (this.active == '1') {
        this.$refs.info.submit()
      } else if (this.active == '2') {
        this.$refs.desc.submit()
      } else if (this.active == '3') {
        this.$refs.group.submit()
      } else if (this.active == '4') {
        this.$refs.rule.submit()
      } else if (this.active == '5') {
        this.$refs.price.submit()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .panel {
    margin-top: 10px;
    background: #fff;

    .hd {
        padding: 0 20px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #e9e9e9;

        span {
            font-size: 12px;
            color: #999;
            font-weight: normal;
            margin-left: 10px;
        }
    }

    .bd {
        padding: 20px;

        .fm-short {
            width: 640px;
        }
    }

    .step-hd {
        color: #3753c6;
    }
}

.head-info {
    padding-right: 20px;
    background: #fff;
    margin-bottom: 5px;

    .fr {
        position: relative;
        width: 120px;
        height: 50px;
        line-height: 50px;
        cursor: pointer;

        .k {
            color: #999999;
        }

        i {
            color: #3a7ab6;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0 0 0 16px;
        }

        .drop-menu {
            position: absolute;
            top: 42px;
            left: -23px;
            width: 172px;
            z-index: 90;
            background: #ffffff;
            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
                0px 6px 16px 0px rgba(0, 0, 0, 0.08),
                0px 3px 6px -4px rgba(0, 0, 0, 0.12);

            .title {
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            }
        }
    }

    .info {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        display: flex;
        align-items: center;

        .item {
            margin-right: 40px;
            font-size: 14px;

            .k {
                color: #999;
            }

            .v {
                color: #333;
            }
        }
    }
}

.mr6 {
    margin-right: 6px;
}
</style>
